<template>
  <ScreenLayout>
    <div class="page-wrap">
      <div class="top-row">
        <div class="cell">
          <DCard
            title="示波器"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <SelectLineChart v-model="leftForm" />
          </DCard>
        </div>
        <div class="cell">
          <DCard
            title="示波器"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <SelectLineChart v-model="rightForm" />
          </DCard>
        </div>
      </div>
      <div class="bottom-row">
        <div class="cell">
          <DCard
            title="分配系数"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <BarChart :options="leftOptions" />
          </DCard>
        </div>
        <div class="cell center">
          <DCard
            title="换流站裕度"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <div class="count-row">
              <div class="count-col" v-for="(item, index) in list" :key="index">
                <div class="count-item">
                  <div class="label">送端换流站{{ index + 1 }}</div>
                  <div class="value">
                    有功上限裕度： <CountUpVue :end-val="item.max" /> MW
                  </div>
                </div>
                <div class="count-item">
                  <div class="label">送端换流站{{ index + 1 }}</div>
                  <div class="value">
                    有功下限裕度： <CountUpVue :end-val="item.min" /> MW
                  </div>
                </div>
              </div>
            </div>
          </DCard>
        </div>
        <div class="cell">
          <DCard
            title="电容电压 kV"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <BarChart :options="rightOptions" />
          </DCard>
        </div>
      </div>
    </div>
  </ScreenLayout>
</template>

<script setup name="Dispatch">
import ScreenLayout from '@/components/ScreenLayout.vue'
import DCard from '@/components/DCard.vue'
import SelectLineChart from '@/components/SelectLineChart.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'
import BarChart from '@/components/Charts/BarChart.vue'
import { randomLenNum } from '@/utils/index.js'
import { getIndex3Botton } from '@/api/base.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()

const leftForm = ref(['6', '31', '56'])
const rightForm = ref(['12', '13', '14'])

const list = ref([])
const leftOptions = ref(null)
const rightOptions = ref(null)

const init = () => {
  // 模拟接口获取数据
  getIndex3Botton({ time: appStore.timePoint }).then(res => {
    if (res.code == '0000') {
      list.value = res.data.centor
      leftOptions.value = res.data.left
      rightOptions.value = res.data.right
    }
  })

  // list.value = Array.from({ length: 3 }).map(() => {
  //   return {
  //     min: randomLenNum(1),
  //     max: randomLenNum(3)
  //   }
  // })

  // leftOptions.value = {
  //   xAxis: Array.from({ length: 6 }).map(() => '2021-09-01'),
  //   series: Array.from({ length: 6 })
  //     .map(() => randomLenNum(3))
  //     .map(Number)
  // }
  // rightOptions.value = {
  //   xAxis: Array.from({ length: 6 }).map(() => '2021-09-01'),
  //   series: Array.from({ length: 6 })
  //     .map(() => randomLenNum(3))
  //     .map(Number)
  // }

  // console.log(leftOptions.value,'0909090', rightOptions.value,'0909090', list)
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
// 循环旋转动画
@keyframes rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
.page-wrap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .top-row {
    width: 100%;
    height: 70%;
    display: flex;
    gap: 20px;
    .cell {
      width: 50%;
      height: 100%;
      background: linear-gradient(
        180deg,
        RGBA(6, 39, 75, 1) 0%,
        RGBA(6, 39, 75, 1) 60%,
        RGBA(6, 39, 75, 0) 100%
      );
    }
  }
  .bottom-row {
    width: calc(100% - 0px);
    height: 30%;
    margin: 0 0px;
    background: linear-gradient(
      180deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 1) 60%,
      RGBA(6, 39, 75, 0) 100%
    );
    display: flex;
    gap: 20px;
    .cell {
      height: 100%;
      flex: 1;
      &.center {
        flex: 2;
        .count-row {
          width: 100%;
          height: 100%;
          display: flex;
          gap: 20px;
          .count-col {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 20px 0;
            box-sizing: border-box;
            .count-item {
              display: flex;
              flex-direction: column;
              gap: 10px;
              .label {
                font-size: 28px;
              }
              .value {
                font-size: 24px;
                span {
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
